<template>
	<div class="sqDetaile">
		<div class="task-logo">
			<el-avatar :size="55" src="../assets/zhanwei.png" @error="errorHandler">
			    <img src="../assets/log.png"/>
			</el-avatar>
			<img src="../assets/jiantou.png" class="jiantou">
			<el-avatar :size="55" src="../assets/zhanwei.png" @error="errorHandler" style="background-color: white;">
			    <img :src="logo"/>
			</el-avatar>
		</div>
		<div class="content">
			<p>{{name}}申请获取以下权限</p>
			<p class="txt">获取你的公开信息（昵称、头像等）</p>
			<p class="txt">道具置换</p>
		</div>
		<div class="footer">
			<button class="btn" type="button" @click="shouquan">同意/授权</button>
		</div>
		<div class="other">
			<el-button type="text" class="other-login" @click="otherLogin">使用其他快步账号登录</el-button>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				logo:''||require('../assets/zhanwei.png'),
				name:'',
			}
		},
		mounted(){
			this.logo = JSON.parse(localStorage.getItem('logo')).clientIcon;
			this.name = JSON.parse(localStorage.getItem('logo')).clientName;
		},
		methods: {
			errorHandler(){
				return true
			},
			shouquan() {
				this.$http.post(this.$api.islogin,{
					'user_oauth_approval':true,
					'scope.read':true,
					'_csrf':'12123123'
				}).then(res=>{
					if(res.code == 0){
						window.location.href = res.data.redirectUrl;
					}else{
						this.$message.error(res.msg);
					}
				})
			},
			otherLogin(){
				localStorage.clear();
				this.$router.go(-1);
			}
		}
	}
</script>
<style scoped>
	.sqDetaile {
		padding: 0 30px;
		max-width: 750px;
		margin: auto;
	}

	.content {
		padding: 15px 0;
		font-size: 16px;
	}

	.content p {
		padding-bottom: 15px;
	}

	p.txt {
		color: #ccc;
		margin: 0;

	}

	.footer {
		margin-top: 30px;
	}

	.footer button {
		width: 100%;
		background: linear-gradient(to right, #ff6600 0%, #ff9933 100%);
		color: #ffffff;
		border: 1px solid #FF9800;
		box-shadow: 0px 1px 2px #ccc;
		outline: none;
		font-size: 16px;
		padding: 8px 6px;
		border-radius: 20px;
	}

	.task-logo {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 160px;
		border-bottom: 1px solid #f2f2f2;
	}

	.task-logo img.logo {
		width: 50px;
		height: 50px;
	}

	.jiantou {
		width: 30px;
		height: 20px;
		margin: 0 15px;
	}
	.other{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.other-login{
		position: fixed;
		bottom: 0;
	}
</style>
